<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Template • TodoMVC</title>
  <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
  <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
  <!-- CSS overrides - remove if you don't need it -->
  <link rel="stylesheet" href="css/app.css">
</head>

<body>
  <section class="todoapp" id="app">
    <header class="header">
      <h1>todos</h1>
      <input v-focus v-model.trim="inputTxt" @keyup.enter="onEnter" class="new-todo" placeholder="What needs to be done?" autofocus>
    </header>
    <!-- This section should be hidden by default and shown when there are todos -->
    <section class="main">
      <input :checked="everyDone" @change="onEveryDone($event)" id="toggle-all" class="toggle-all" type="checkbox">
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <!-- These are here just to show the structure of the list items -->
        <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->

        <template v-for="item in showLists">
          <li :key="item.id" :class="{completed:item.done,editing:item == current}">
            <div class="view">
              <input class="toggle" type="checkbox" v-model="item.done">
              <label @dblclick="onEdit(item)">{{item.msg}}</label>
              <button class="destroy" @click="onDelete(item)"></button>
            </div>
            <input class="edit" @blur="onSaveBlur($event,item)" @keyup.enter="onSaveEnter($event)" @keyup.esc="onEsc" :value="item.msg">
          </li>
        </template>

      </ul>
    </section>
    <!-- This footer should hidden by default and shown when there are todos -->
    <footer class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count"><strong>{{activeNum}}</strong> item left</span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a @click="onFilter($event)" :class="{selected:filterStatus=='All'}" href="#/">All</a>
        </li>
        <li>
          <a @click="onFilter($event)" :class="{selected:filterStatus=='Active'}" href="#/active">Active</a>
        </li>
        <li>
          <a @click="onFilter($event)" :class="{selected:filterStatus=='Completed'}" href="#/completed">Completed</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed" v-show="clsShow" @click="clsCompleted">Clear completed</button>
    </footer>
  </section>
  <footer class="info">
    <p>Double-click to edit a todo</p>
    <!-- Remove the below line ↓ -->
    <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
    <!-- Change this out with your name and url ↓ -->
    <p>Created by <a href="http://todomvc.com">you</a></p>
    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
  </footer>
  <!-- Scripts here. Don't remove ↓ -->
  <script src="node_modules/todomvc-common/base.js"></script>
  <!-- 引入Vue -->
  <script src="./node_modules/vue/dist/vue.js"></script>
  <!-- 页面逻辑 -->
  <script src="js/app.js"></script>
</body>

</html>